
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ImageGalleryScreen(),
    );
  }
}

class ImageGalleryScreen extends StatelessWidget {
  final List<String> imageUrls = [
    'https://picsum.photos/200/300',
    'https://picsum.photos/250/350',
    'https://picsum.photos/300/400'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('图片画廊')),
      body: Column(
        children: [
          // 单图预览示例
          const Padding(
            padding: EdgeInsets.all(8.0),
            child: Text('单图预览', style: TextStyle(fontSize: 18)),
          ),
          GestureDetector(
            onTap: () => _openSingleImage(context, imageUrls[0]),
            child: Hero(
              tag: 'singleImage',
              child: Image.network(imageUrls[0], height: 150),
            ),
          ),

          // 多图预览示例
          const Padding(
            padding: EdgeInsets.all(8.0),
            child: Text('多图预览', style: TextStyle(fontSize: 18)),
          ),
          SizedBox(
            height: 120,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: imageUrls.length,
              itemBuilder: (context, index) {
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: GestureDetector(
                    onTap: () => _openGallery(context, index),
                    child: Hero(
                      tag: 'image$index',
                      child: Image.network(imageUrls[index], width: 150),
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  void _openSingleImage(BuildContext context, String url) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => Scaffold(
          body: Center(
            child: PhotoView(
              imageProvider: NetworkImage(url),
              heroAttributes: const PhotoViewHeroAttributes(tag: 'singleImage'),
            ),
          ),
        ),
      ),
    );
  }

  void _openGallery(BuildContext context, int initialIndex) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => GalleryView(
          images: imageUrls,
          initialIndex: initialIndex,
        ),
      ),
    );
  }
}

class GalleryView extends StatefulWidget {
  final List<String> images;
  final int initialIndex;

  const GalleryView({
    super.key,
    required this.images,
    this.initialIndex = 0,
  });

  @override
  State<GalleryView> createState() => _GalleryViewState();
}

class _GalleryViewState extends State<GalleryView> {
  late int currentIndex;
  late PageController pageController;

  @override
  void initState() {
    super.initState();
    currentIndex = widget.initialIndex;
    pageController = PageController(initialPage: widget.initialIndex);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back, color: Colors.white),
          onPressed: () => Navigator.pop(context),
        ),
      ),
      body: Stack(
        children: [
          PhotoViewGallery.builder(
            pageController: pageController,
            itemCount: widget.images.length,
            onPageChanged: (index) => setState(() => currentIndex = index),
            builder: (context, index) {
              return PhotoViewGalleryPageOptions(
                imageProvider: NetworkImage(widget.images[index]),
                heroAttributes: PhotoViewHeroAttributes(tag: 'image$index'),
              );
            },
          ),
          Positioned(
            bottom: 20,
            left: 0,
            right: 0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: widget.images.map((url) {
                int index = widget.images.indexOf(url);
                return Container(
                  width: 8,
                  height: 8,
                  margin: const EdgeInsets.symmetric(horizontal: 4),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: currentIndex == index 
                      ? Colors.white 
                      : Colors.white54,
                  ),
                );
              }).toList(),
            ),
          ),
        ],
      ),
    );
  }
}
